image 图片

更新时间：2023-06-19

image 图片展示

一、属性说明

属性名	类型	默认值	必填	说明
class-name	String	无	否	组件类名
icon-img	String	无	否	加载失败时或无src时，展示icon的类名
src	String	无	是	图片链接
width	string / number	无	否	宽度
height	string / number	无	否	高度
mode	String	无	否	图片裁剪缩放值
lazy-load	Boolean	true	否	是否懒加载
show-error	Boolean	true	否	是否展示图片加载失败提示
show-loading	Boolean	false	否	是否展示图片加载中提示
use-loading-slot	Boolean	false	否	是否使用 loading 插槽
use-error-slot	Boolean	false	否	是否使用 error 插槽

二、示例：

json:

{
    "navigationBarTitleText": "image-图片展示",
    "usingComponents": {
        "iov-image": "iov-ui/lib/image"
    }
}

swan:

<view class="image-demo">
    <view class="demo">
        <view>默认</view>
        <iov-image width="40vh" height="40vh" lazyLoad="{{ true }}" src="{{ imgUrl }}"></iov-image>
    </view>
    <view class="demo">
        <view>拉伸</view>
        <iov-image width="40vh" height="20vh" src="{{ imgUrl }}"></iov-image>
    </view>
    <view class="demo">
        <view>自定义class</view>
        <iov-image class-name="image-self" lazyLoad="{{ true }}" src="{{ imgUrl }}"></iov-image>
    </view>
    <view class="demo">
        <view>aspectFill</view>
        <iov-image mode="aspectFill" width="30vh" height="30vh" lazyLoad="{{ true }}" src="{{ imgUrl }}"></iov-image>
    </view>
    <view class="demo">
        <view>aspectFit</view>
        <iov-image mode="aspectFit" width="30vh" height="30vh" lazyLoad="{{ true }}" src="{{ imgUrl }}"></iov-image>
    </view>
    <view class="demo">
        <view>scaleToFill</view>
        <iov-image mode="scaleToFill" width="30vh" height="30vh" lazyLoad="{{ true }}" src="{{ imgUrl }}"></iov-image>
    </view>
    <view class="demo">
        <view>center</view>
        <iov-image mode="center" width="30vh" height="30vh" lazyLoad="{{ true }}" src="{{ imgUrl }}"></iov-image>
    </view>
    <view class="demo">
        <view>loading</view>
        <iov-image mode="center" width="30vh" height="30vh"></iov-image>
    </view>
    <view class="demo">
        <view>use-loading-slot</view>
        <iov-image use-loading-slot mode="center" width="30vh" height="30vh">
            <text slot="loading">loading...</text>
        </iov-image>
    </view>
    <view class="demo">
        <view>加载失败</view>
        <iov-image mode="center" width="30vh" height="30vh" src="https://www.baidu.com/"></iov-image>
    </view>
    <view class="demo">
        <view>use-loading-slot</view>
        <iov-image use-error-slot mode="center" width="30vh" height="30vh" src="https://www.baidu.com/">
            <text slot="error">加载失败</text>
        </iov-image>
    </view>
</view>

js:

Page({
    data: {
        imgUrl: 'https://img.yzcdn.cn/vant/cat.jpeg'
    }
});

icon 图标 image-preview图片预览